<template>
	<view class="cenTen">
		<view class="header_top" :style="{position:headerPosition,top:headerTop}">
			<view class="screen_ipt">
				<view class="Arrow_icon" :class="{red: !isshow,blue: isshow}" @click="control_show">
					<view class="screen_text">{{jinlei}}</view>
					<view class="iconfont icon-bottom-copy"></view>
				</view>
			</view>
			<view class="transparent" v-if="parent_show" >
				<view class="Mask" @click="hide_view"></view>
				<view class="frame">
					<view class="frame_Roll">
						<view class="frame_view">
							<view class="screen">快捷筛选</view>
							<view class="frame_quick">
								<view v-for="(time,index) in list" :key="index" :class="{ration:index === discolo}" @click="discoloration(index,$event)" class="list_frame" :value="time.name">{{time.name}}</view>
							</view>
						</view>
						<view class="frame_view">
							<view class="screen">自定义</view>
							<view class="custom">
								<view class="custom_view" @click="datacustom">{{start_time}}</view>
								<view class="custom_yi">一</view>
								<view class="custom_view" @click="datacustom">{{end_time}}</view>
							</view>
						</view>
					</view>
					<view class="Reset_complete">
						<view class="Reset" @click="reset">重置</view>
						<view class="complete" @click="complete">完成</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderExamine" @click="nalixt">
			<view class="examineDai">
				<view class="mineImg">
					<!-- 用此图片来判断是什么类型的订单（酒店、线路、景点） -->
					<!-- <navigator url="hotelorder"> -->
					<image src="../../../../static/images/user/hoehtimgaes.png"></image>
					<view class="examineId">我是标题</view>
				</view>
				<view class="examineZt">已出团</view>
			</view>
			<view class="imgHead">
				<image src="../../../../static/images/bannergy.jpg"></image>
				<view class="imgheadOrder">
					<view>出团时间：</view>
					<view>数量：</view>
					<view>总价：</view>
				</view>
			</view>
			<view class="waitForsh">
				<view>已出团</view>
				<!-- <view>已回团</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isshow:true,
				jinlei:'近七天',
				headerPosition:"fixed",
				headerTop:"0px",
				isActive:true,
				parent_show:false,
				start_time:'请选择',
				end_time:'请选择',
				discolo:0,
				list:[
					{index:0,name:'近15天'},
					{index:1,name:'近1个月'},
					{index:2,name:'近三个月'}
				]
			}
		},
		onLoad() {
			//兼容H5下排序栏位置
			// #ifdef H5
				let Timer = setInterval(()=>{
					let uniHead = document.getElementsByTagName('uni-page-head');
					if(uniHead.length>0){
						this.headerTop = uniHead[0].offsetHeight+'px';
						clearInterval(Timer);//清除定时器
					}
				},1);
			// #endif
		},
		onShow(options) {
			console.log(options); 
			let select_date = uni.getStorageSync("select_date");
			// if (select_date !== undefined) {
			this.start_time = select_date.startDate.year+"-"+select_date.startDate.month+"-"+select_date.startDate.day;
			this.end_time = select_date.endDate.year+"-"+select_date.endDate.month+"-"+select_date.endDate.day;
			this.count_time =  select_date.countDays;
			// }
		},
		methods:{
			// 日历跳转
			datacustom(){
				uni.navigateTo({
					url:'calendar'
				})
			},
			
			// 点击筛选显示隐藏
			control_show(){
				this.parent_show = !this.parent_show;
				if(this.parent_show == true){
					this.isshow = false;
				}else{
					this.isshow = true;
				}
			},
			
			// 点击遮罩层也可以关闭
			hide_view(){
				console.log(123)
				let chti = false;
				this.parent_show = chti;
				if(this.parent_show == true){
					this.isshow = false;
				}else{
					this.isshow = true;
				}
			},
			
			// 快捷筛选
			discoloration(index,$event){
				this.discolo = index;
				let di = event.currentTarget;
				// this.jinlei = di.innerHTML;
			},
			
			// 完成按钮
			complete(){
				let chti = false;
				this.parent_show = chti;
				this.jinlei = this.list[this.discolo].name;
				if(this.parent_show == true){
					this.isshow = false;
				}else{
					this.isshow = true;
				}
			},
			
			// 重置
			reset(){
				this.yifenx = '';
				this.numdertp = '';
				this.discolo = '';
				this.pin = '';
				this.start_time = '请选择';
				this.end_time = '请选择';
			}
		}
	}
</script>

<style>
	.red {
		color: #13b1eb;
		font-size: 14px;
	}
	.blue {
		color: #777;
		font-size: 20px;
	}
	.cenTen{
		padding: 88upx 0;
	}
	.near_qitian{
		display: flex;
		justify-content: center;
		width: 94%;
		padding: 20upx 3%;
	}
	.near_qitian view{
		line-height: 32upx;
	}
	.icon-bottom-copy{
		font-size: 36upx;
	}
	
	/* 待审核 */
	.orderList{
		width: 100%;
		margin-top: 118upx;
		margin-bottom: 88upx;
	}
	.orderExamine{
		padding: 15upx 3%;
		width: 90%;
		margin: 0 auto;
		background: #f9f9f9;
		border-radius: 20upx;
		margin-top: 24upx;
	}
	.examineDai{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 18upx 0;
		border-bottom: 1upx solid #d3d3d3;
	}
	.examineDai image{
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		margin-right: 10upx;
	}
	.examineDai view{
		line-height: 1.2;
	}
	.mineImg{
		width: 75%;
		display: flex;
	}
	.examineId{
		font-size: 32upx;
		color: #333;
		width: 90%;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.examineZt{
		width: 25%;
		font-size: 30upx;
		text-align: right;
		color: #13b1eb;
	}
	.imgHead image{
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		margin-right: 15upx;
	}
	.imgheadOrder view{
		line-height: 1.4;
		font-size: 30upx;
		color: #555;
	}
	.imgHead{
		display: flex;
		margin: 18upx 0;
	}
	.waitForsh view{
		width: 28%;
		height: 65upx;
		line-height: 62upx;
		font-size: 30upx;
		border-radius: 50upx;
		border: 0;
		text-align: center;
		border: 1upx solid #a4a4a4;
		color: #888;
		margin-left: 20upx;
		margin-top: 15upx;
	}
	.waitForsh{
		display: flex;
		justify-content: flex-end;
		flex-wrap:wrap;
	}
	
	/* 导航 */
	.header_top{
		width: 100%;
		background: #fff;
		z-index: 999;
	}
	.ration{
		background: #ff4800!important;
		color: #fff!important;
	}
	.month_head{
		padding-top: 88upx;
	}
	.Mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	.transparent{
		width: 100%;
		height: 100vh;
		position: relative;
		left: 0;
	}
	.icon-bottom-copy{
		font-size: 38upx;
	}
	.Arrow_icon{
		display: flex;
		justify-content: center;
	}
	.screen_text{
		font-size: 32upx;
	}
	.screen_sous{
		font-size: 32upx;
		color: #777;
	}
	.screen_ipt view{
		line-height: 50upx;
	}
	.screen_ipt{
		width: 92%;
		text-align: center;
		padding: 20upx 4%;
		background: #f9f9f9;
	}
	uni-button:after{
		border: 0;
	}
	.frame_view{
		margin-bottom: 30upx;
	}
	.screen{
		color: #333;
		font-size: 32upx;
	}
	.list_frame{
		color: #333;
		background: #f6f6f6;
	}
	.frame_quick view{
		font-size: 30upx;
		text-align: center;
		margin: 15upx 3% 15upx 0upx;
		padding: 0 2.5%;
		border-radius: 10upx;
		line-height: 70upx;
		min-width: 25%;
	}
	.frame_quick{
		display: flex;
		flex-wrap:wrap;
	}
	.Reset_complete{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
	}
	.Reset_complete view{
		width: 50%;
		line-height: 88upx;
		text-align: center;
		font-size: 30upx;
	}
	.Reset{
		color: #13b1eb;
		background: #d1f0fb;
	}
	.complete{
		color: #fff;
		background: #13b1eb;
	}
	.frame_Roll{
		min-height: 200upx;
		max-height: 800upx;
		overflow-y:scroll;
	}
	.frame{
		position: relative;
		padding: 26upx 3% 88upx 3%;
		width: 94%;
		background: #fff;
		
	}
	.income{
		font-size: 28upx;
		color: #888;
	}
	.income view{
		line-height: 1.5;
	}
	.Clerkcolor{
		color: #caaa2c;
	}
	.custom{
		display: flex;
		justify-content: space-around;
	}
	.custom_view{
		font-size: 32upx;
		color: #333;
		margin: 20upx 0;
	}
	.custom_yi{
		font-size: 32upx;
		color: #333;
		margin: 20upx 0;
	}
</style>
